<template>
	<view class="container">
		<view class="title">Wi-Fi连接失败</view>
		<view class="msg">请按照下面的说明再试一次</view>
		<view class="list">
			<view class="list-item">
				<view class="list-title"><text></text>检查码是否正确(区分大小写)</view>
			</view>
			<view class="list-item">
				<view class="list-title"><text></text>将设备移近路由器然后重试</view>
				<view class="list-child">
					<view class="child-item"><text></text>更改路由器的加出晚式</view>
					<view class="child-item"><text></text>将设备的MAC地址添加到白名单中</view>
				</view>
			</view>
		</view>
		<view class="btn-wrapper">
			<BaseButton shape="circle" text="重新连接" @click="onReset"/>
			<BaseButton type="default" shape="circle" text="退出" @click="onExit"/>
		</view>
	</view>
</template>

<script>
	import BaseButton from "@/components/base-button";
	import {
		getCurrentPage
	} from '@/core/app'
	
	export default {
		data() {
			return {
				isFlag: false,
			};
		},
		components: {
			BaseButton
		},
		onShow() {
			const pages = getCurrentPages();
			// 打印页面栈中的所有页面路径
			console.log("当前页面栈包含的页面：");
			pages.forEach((page, index) => {
				console.log(`第 ${index + 1} 个页面：`, page.route);
			});
			
			this.isFlag = getCurrentPage().query.isFlag == 1;
			console.log("isFlag", this.isFlag);
		},
		methods: {
			onReset() {
				if(this.isFlag) {
					uni.navigateTo({
						url:'/pages/addDevice/configWifiDevice'
					})
				} else {
					uni.navigateBack({
						delta: 1,
					})
				}
			},
			onExit() {
				uni.navigateBack({
					delta: 2,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #FFFFFF;
	
		.title {
			font-size: 58rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-left: 53rpx;
			padding-top: 100rpx;
		}
	
		.msg {
			font-size: 30rpx;
			font-family: MicrosoftYaHei;
			color: #3B3B3B;
			margin-left: 53rpx;
			margin-top: 50rpx;
		}
	
		.list {
			margin-left: 53rpx;
			margin-top: 40rpx;
			font-size: 30rpx;
			font-family: MicrosoftYaHei;
			color: #3B3B3B;
	
			.list-item {
				margin-bottom: 30rpx;
	
				.list-title {
					display: flex;
					align-items: center;
	
					text {
						width: 20rpx;
						height: 20rpx;
						border-radius: 100%;
						background-color: #2B8AFF;
						margin-right: 20rpx;
					}
				}
	
				.list-child {
					margin-left: 40rpx;
	
					.child-item {
						display: flex;
						align-items: center;
						margin-top: 30rpx;
	
						text {
							width: 20rpx;
							height: 20rpx;
							border-radius: 100%;
							border: 5rpx solid #56D450;
							box-sizing: border-box;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	
		.btn-wrapper {
			height: 220rpx;
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>
